<template>
	<div class="time" @click="hanlderOpen">
		<div class="time-text">
			<span class="gray">更新时间：</span><span class="black">{{ textArr[0] }}</span>
		</div>
		<div class="time-icon" :class="{ rotate: isShow }">
			<el-icon>
				<ArrowDown />
			</el-icon>
		</div>
		<div class="time-pop" v-if="isShow">
			<div class="time-pop-tex" v-for="value in textArr.slice(1)">
				<span class="gray">更新时间：</span><span class="black">{{ value }}</span>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ArrowDown } from '@element-plus/icons-vue';
	defineProps({
		textArr: {
			type: Array,
			default: () => ['2025-02-03 15:20', '2025-02-03 15:20', '2025-02-03 15:20', '2025-02-03 15:20'],
		},
		isShow: {
			type: Boolean,
			default: false,
		},
	});
	const emit = defineEmits(['update:open']);
	const hanlderOpen = () => {
		emit('update:open');
	};
</script>

<style lang="scss" scoped>
	.gray {
		color: #888888;
	}
	.black {
		color: #222222;
	}
	.time {
		width: 210px;
		@include flex;
		position: relative;
		cursor: pointer;
		.time-text {
			@include font(_, 14px, 28px, 400);
		}
		.time-icon {
			margin-left: 5px;
			transition: all 0.3s;
			transform: rotate(0deg);
			&.rotate {
				transform: rotate(180deg);
			}
		}
		.time-pop {
			cursor: auto;
			background-color: white;
			width: 210px;
			padding: 12px 10px;
			position: absolute;
			top: -50%;
			left: 50%;
			transform: translate(-50%,40%);
			@include font(_, 14px, 28px, 400);
			border-radius: var(--blog-box-radius);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		}
	}
</style>
